<template>
  <Dialog :appDialog="appDialog">
    <el-tabs class="demo-tabs" v-model="activeName" @tab-change="handleClick">
      <el-tab-pane v-for="(item, index) in tabsList" :key="item.label" :label="item.name" :name="item.label">
        <div class="pane-box">
          <div class="pane-body-box">
            <div class="item" v-for="it in item.list" :key="it.id" @click="choosePoster(it, index)">
              <el-image class="img" :src="it.url" fit="cover" />
              <el-checkbox :model-value="it.isCheck" class="checkBox" />
            </div>
            <div class="item" v-if="item.list.length % 3 === 2" >
               <!-- 额外补充元素块,防止布局不够均匀分布 -->
            </div>
          </div>
          <el-pagination v-model:currentPage="pageParam.page" :page-sizes="[3]" v-model:page-size="pageParam.page_size" background layout="total, prev, pager, next, sizes" :total="pageParam.total" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </Dialog>
</template>


<script setup lang="ts">
import { getTemplateTypeList, getTemplateList } from '@/api/highMaterial/poster'
import Dialog from '@/components/Dialog.vue'
import { ref, watch } from 'vue'
const emit = defineEmits(['save'])
const pageParam = ref({
  page: 1,
  page_size: 3,
  total: 0
})
const activeName = ref()
const chooseInfo: any = ref({})

const tabsList = ref([
  {
    label: '1',
    name: '节日海报',
    list: [
      { url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/tmp-file/2022-04-12/lWG92XNY38V1pn4W921hWVoJd6rmbqeRB07k.jpg', isCheck: false },
      { url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/tmp-file/2022-04-12/lWG92XNY38V1pn4W921hWVoJd6rmbqeRB07k.jpg', isCheck: false },
      { url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/tmp-file/2022-04-12/lWG92XNY38V1pn4W921hWVoJd6rmbqeRB07k.jpg', isCheck: false }
    ]
  },
  {
    label: '2',
    name: '活动海报',
    list: [
      { url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/tmp-file/2022-04-12/lWG92XNY38V1pn4W921hWVoJd6rmbqeRB07k.jpg', isCheck: false },
      { url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/tmp-file/2022-04-12/lWG92XNY38V1pn4W921hWVoJd6rmbqeRB07k.jpg', isCheck: false },
      { url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/tmp-file/2022-04-12/lWG92XNY38V1pn4W921hWVoJd6rmbqeRB07k.jpg', isCheck: false }
    ]
  }
])

// 获取列表
const getTemplateListFun = () => {
  getTemplateList({ ...pageParam.value, type_id: activeName.value }).then((r: any) => {
    let index = tabsList.value.findIndex((it: any) => {
      return it.label == activeName.value
    })
    r.data = r.data.map((it: any) => {
      it.isCheck = false
      return it
    })
    pageParam.value.total = r.total
    tabsList.value[index].list = r.data
    console.log(tabsList.value[index].list)
  })
}

// 获取类型
const getTemplateTypeListFun = () => {
  getTemplateTypeList({}).then((r: object) => {
    r = r.map((it: object) => {
      it.label = it.type_id + ''
      it.list = []
      return it
    })
    activeName.value = r[0].label
    tabsList.value = r
    getTemplateListFun()
  })
}

const cancelHandel = () => {
  appDialog.value.visible = false
}
const submitHandel = () => {
  emit('save', { url: chooseInfo.value.url, code: chooseInfo.value.code })
  appDialog.value.visible = false
}
const appDialog = ref({
  visible: false,
  title: '选择海报',
  width: '815px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确认'
})

watch(
  () => appDialog.value.visible,
  (val: boolean) => {
    if (val) {
      getTemplateTypeListFun()
    }
  }
)

const choosePoster = (val: any, index: number) => {
  console.log(111, val)
  tabsList.value[index].list.forEach((item: any) => {
    if (item.id == val.id) {
      item.isCheck = true
      chooseInfo.value = val
    } else {
      item.isCheck = false
    }
  })
  console.log(tabsList.value, 555)
}

const handleClick = () => {
  pageParam.value.page = 1
  pageParam.value.total = 0

  getTemplateListFun()
}

// 分页信息
const handleCurrentChange = (val: any) => {
  getTemplateListFun()
}

defineExpose({ appDialog })
</script>

<style lang="scss" scoped>
.pane-body-box {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  .item {
    margin-bottom: 20px;
    width: 240px;
    height: 427px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
    }
    &:last-child {
      margin-right: 0;
    }
    .checkBox {
      position: absolute;
      top: -6px;
      left: 6px;
    }
  }
}
</style>
